<template>
  <el-dropdown trigger="click" ref="iconDropdown">
    <span></span>
    <template #dropdown>
      <div class="select-icon-modal">
        <div class="select-icon-search">
          <el-input v-model="searchInput" suffix-icon="Search" />
        </div>
        <div class="select-icon-list">
          <template v-for="(item, index) in iconLists" :key="index">
            <template v-if="index + 1 == curPage">
              <div
                class="select-icon-item"
                v-for="(items, idx) in item"
                :key="idx"
                @click="selectItem(items)"
              >
                <i class="icon" :class="'icon-' + items.font_class"></i>
              </div>
            </template>
          </template>
          <div v-if="iconLists.length == 0" class="select-icon-empty">
            无数据
          </div>
        </div>
        <div class="select-icon-page">
          <div class="select-icon-page-count">
            <span id="select-icon-page-current">{{ curPage }}</span>
            /<span id="select-icon-page-pages">{{ countPage }}</span> (共<span
              id="select-icon-page-length"
              >{{ total }}</span
            >个)
          </div>
          <div class="select-icon-page-operate">
            <div class="select-icon-close"></div>
            <el-button size="small" @click="close">关闭</el-button>
            <el-button
              size="small"
              icon="ArrowLeftBold"
              @click="prevClick"
              :disabled="curPage == 1 || countPage == 0"
            ></el-button>
            <el-button
              size="small"
              icon="ArrowRightBold"
              @click="nextClick"
              :disabled="countPage == curPage || countPage == 0"
            ></el-button>
          </div>
        </div>
      </div>
    </template>
  </el-dropdown>
</template>
<script lang="ts">
export default {
  name: "select-icon-modal",
};
</script>
<script setup lang="ts">
import { ref, watch } from "vue";
import iconData from "./icon.json";
const iconDropdown = ref();

const emit = defineEmits(["change"]);

const open = () => {
  init();
  iconDropdown.value.handleOpen();
};
const close = () => {
  iconDropdown.value.handleClose();
};

const init = () => {
  searchInput.value = "";
  curPage.value = 1;
};

// 查询
const searchInput = ref("");
const total: any = ref(iconData.length);

//分页数据
const pageLimit = 20;
//总页数
const countPage = ref(
  total.value % pageLimit === 0
    ? total.value / pageLimit
    : parseInt(String(total.value / pageLimit + 1))
);
//当前分页
const curPage = ref(1);

//上一页
const prevClick = () => {
  if (curPage.value > 1 && countPage.value > 0) {
    curPage.value--;
  }
};
//下一页
const nextClick = () => {
  if (curPage.value < pageLimit && countPage.value > 0) {
    curPage.value++;
  }
};

//当前分页数据
const iconLists: any = ref([]);

//当前总数据
const icons: any = ref([]);

const getIcons = () => {
  iconLists.value = [];
  for (var i = 0; i < countPage.value; i++) {
    // 按limit分块
    let lm: any = [];
    for (
      var j = i * pageLimit;
      j < (i + 1) * pageLimit && j < total.value;
      j++
    ) {
      lm.push(icons.value[j]);
    }
    iconLists.value.push(lm);
  }
};

const getData = () => {
  icons.value = [];
  for (var i = 0; i < iconData.length; i++) {
    var obj: any = iconData[i];
    // 判断是否模糊查询
    if (
      searchInput.value &&
      obj?.font_class.indexOf(searchInput.value) === -1 &&
      obj.name.indexOf(searchInput.value) === -1
    ) {
      continue;
    }
    icons.value.push(obj);
  }
  total.value = icons.value.length;
  countPage.value =
    total.value % pageLimit === 0
      ? total.value / pageLimit
      : parseInt(String(total.value / pageLimit + 1));
  curPage.value = 1;
  getIcons();
};

getData();

watch(
  () => searchInput.value,
  (val) => {
    getData();
  },
  { deep: true }
);

const selectItem = (item:any) =>{
    emit("change",'icon-'+item.font_class);
    close()
}

defineExpose({ open });
</script>
<style scoped>
.select-icon-modal {
  width: 400px;
  height: 340px;
}
.select-icon-search {
  padding: 10px 10px 5px;
}
.select-icon-page {
  border-top: 1px solid #f0f0f0;
  height: 30px;
  line-height: 30px;
  padding: 10px 0 0;
  margin: 5px 10px 0;
}
.select-icon-page .select-icon-page-count {
  display: inline-block;
}
.select-icon-page .select-icon-page-operate {
  display: flex;
  float: right;
  cursor: default;
}
.select-icon-list {
  margin: 0 5px;
  height: 230px;
}
.select-icon-item {
  display: inline-block;
  width: calc(25% - 10px);
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  vertical-align: top;
  height: 36px;
  margin: 4px;
  border: 1px solid #ddd;
  border-radius: 2px;
}
.select-icon-item .icon{
  font-size: 16px;
}
.select-icon-empty {
  text-align: center;
  line-height: 60px;
  color: var(--base-grey);
}
.select-icon-item:hover {
    border-color: var(--base-default);
    background: var(--el-color-primary-light-9);
    color:var(--base-default);
}
</style>